import { circle } from '@antv/x6/lib/registry/marker/circle';
<template>
    <svg id="progress" width="48" height="48" style="transform: rotate(-90deg);">
        <circle cx="24" cy="24" r="12" stroke="#EBEEF0" stroke-width="4" fill="none" />
        <circle ref="circleRef" cx="24" cy="24" r="12" :stroke="color" stroke-width="4" fill="none" />
    </svg>

</template>

<script>
export default {
    props: ['percent', 'color'],
    mounted() {
        this.setPercent(Math.round(Number(this.$props.percent)));
    },
    methods: {
        setPercent(percent) {
            const dom = this.$refs.circleRef
            const circumference = 2 * Math.PI * dom.getAttribute('r');
            let offset = circumference - (percent / 100) * circumference;
            dom.style.strokeDasharray = circumference;
            dom.style.strokeDashoffset = offset;
        }
    },
};
</script>

<style>
.progress-circle {
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
    transform-origin: center;
    transform-box: fill-box;
    border-radius: 50%;
}

.percent {
    cx: 25px;
    cy: 25px;
    r: 12px;
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
}
</style>
